<template>
  <div>
    <!--    <div class="comment-title">-->
    <!--      <i class="iconfont iconpinglunzu" />留言-->
    <!--    </div>-->
    <!-- 评论详情 -->
    <div v-if="count > 0 && reFresh">
      <!-- 评论数量 -->
      <div class="count">
        {{ count }} 留言
      </div>
      <div
        v-for="(item, index) of msgList"
        :key="item.id"
        style="display:flex"
        class="pt-5"
      >
        <!-- 头像 -->
        <v-avatar
          size="50"
          class="comment-avatar"
        >
          <img :src="item.avatar">
        </v-avatar>
        <div class="comment-meta">
          <!-- 用户名 -->
          <div class="comment-user">
            <span v-if="!item.targetPath">{{ item.nickName }}</span>
            <a
              v-else
              :href="item.targetPath"
              target="_blank"
            >
              {{ item.nickName }}
            </a>
            <span
              v-if="item.qq === '349536579'"
              class="blogger-tag"
            >博主</span>
          </div>
          <!-- 信息 -->
          <div class="comment-info">
            <!-- 楼层 -->
            <span style="margin-right:10px">{{ count - index }}楼</span>
            <!-- 发表时间 -->
            <span style="margin-right:10px">{{ item.createTime | date }}</span>
            <!-- 回复 -->
            <span
              class="reply-btn"
              @click="replyComment(index, item)"
            >
              回复
            </span>
          </div>
          <!-- 评论内容 -->
          <p
            class="comment-content"
            v-html="item.content"
          />

          <!-- 回复信息 -->
          <div v-show="item.childrenShow">
            <div
              v-for="reply of item.children"
              :key="reply.id"
              style="display:flex"
            >
              <!-- 头像 -->
              <v-avatar
                size="36"
                class="comment-avatar"
              >
                <img :src="reply.avatar">
              </v-avatar>
              <div class="reply-meta">
                <!-- 用户名 -->
                <div class="comment-user">
                  <span v-if="!reply.targetPath">{{ reply.nickName }}</span>
                  <a
                    v-else
                    :href="reply.targetPath"
                    target="_blank"
                  >
                    {{ reply.nickName }}
                  </a>
                  <span
                    v-if="reply.qq === '349536579'"
                    class="blogger-tag"
                  >博主</span>
                </div>
                <!-- 信息 -->
                <div class="comment-info">
                  <!-- 发表时间 -->
                  <span style="margin-right:10px">
                    {{ reply.createTime | date }}
                  </span>
                  <!-- 回复 -->
                  <span
                    class="reply-btn"
                    @click="replyComment(index, reply)"
                  >
                    回复
                  </span>
                </div>
                <!-- 回复内容 -->
                <p class="comment-content">
                  <!-- 回复用户名 -->
                  <template>
                    <span
                      class="comment-nickname ml-1"
                    >
                      @{{ reply.replyNickName }}
                    </span>
                  </template>
                  <span v-html="reply.content" />
                </p>
              </div>
            </div>
          </div>

          <!-- 回复数量 -->
          <div
            v-show="item.children.length > 3"
            ref="check"
            class="mb-3"
            style="font-size:0.75rem;color:#6d757a"
          >
            共
            <b>{{ item.children.length }}</b>
            条回复，
            <span
              style="color:#00a1d6;cursor:pointer"
              @click="showReply(index,item)"
            >
              点击<span v-if="item.childrenShow">隐藏</span>
              <span v-else>查看</span>
            </span>
          </div>
          <!--          回复框-->
          <!--          <Reply-->
          <!--            ref="replyCommentRef_"-->
          <!--            :parent-id="item.id"-->
          <!--            :is-reply="true"-->
          <!--            :article-id="articleId"-->
          <!--            :ownership="ownership"-->
          <!--            @reloadReply="loadData"-->
          <!--            @cancelReply="cancelReply"-->
          <!--          />-->
        </div>
      </div>
    </div>
    <!-- 没有评论提示 -->
    <div
      v-else
      style="padding:1.25rem;text-align:center"
    >
      暂无评论~
    </div>
    <!-- 评论框 -->
    <el-divider />
    <reply
      id="newComment"
      ref="newCommentRef"
      :article-id="articleId"
      :ownership="ownership"
      @reloadReply="loadData"
    />
  </div>
</template>

<script>
import Reply from './Reply'

export default {
  components: {
    Reply,
  },
  props: {
    commentList: {
      type: Array
    },
    count: {
      type: Number
    },
    articleId:{
      type: Number
    },
    ownership:{
      type: Number
    }
  },
  data() {
    return {
      reFresh: true,
      img: process.env.VUE_APP_IMG_API,
      commentContent: '',
      chooseEmoji: false,
      current: 1,
      msgList:[],
    }
  },
  computed: {

  },
  watch: {
    commentList(val) {
      val.forEach(item=>{
        this.$set(item,'childrenShow',item.children.length <= 3)
      })
      this.msgList = val
      this.reFresh = false
      this.$nextTick(() => {
        this.reFresh = true
      })
    },
  },
  mounted() {
    this.$refs.newCommentRef.$el.style.display = 'block'
  },
  methods: {
    loadData(){
      this.$emit('reloadComment')
    },
    cancelReply(){
      this.$refs.newCommentRef.$el.style.display = 'block'
    },
    replyComment(index, item) {
      //传值给回复框
      this.$refs.newCommentRef.msgForm.parentId = item.id
      this.$refs.newCommentRef.msgForm.replyNickName = item.nickName

      let comment = document.getElementById('newComment')
      comment.scrollIntoView(true)

    },
    showReply(index,item){
      item.childrenShow = !item.childrenShow
    },
    addEmoji(key) {
      this.commentContent += key
    },
  }
}
</script>

<style scoped>
p {
  margin-bottom: 1.25rem !important;
}
.blogger-tag {
  background: #ffa51e;
  font-size: 12px;
  display: inline-block;
  border-radius: 2px;
  color: #fff;
  padding: 0 5px;
  margin-left: 6px;
}
.comment-title {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 40px;
  margin-bottom: 10px;
}
.comment-title i {
  font-size: 1.5rem;
  margin-right: 5px;
}
.comment-input-wrapper {
  border: 1px solid #90939950;
  border-radius: 4px;
  padding: 10px;
  margin: 0 0 10px;
}
.count {
  padding: 5px;
  line-height: 1.75;
  font-size: 1.25rem;
  font-weight: bold;
}
.comment-meta {
  margin-left: 0.8rem;
  width: 100%;
  border-bottom: 1px dashed #f5f5f5;
}
.reply-meta {
  margin-left: 0.8rem;
  width: 100%;
}
.comment-user {
  font-size: 14px;
  line-height: 1.75;
}
.comment-user a {
  color: #5c5c5c !important;
  font-weight: 500;
  transition: 0.3s all;
}
.comment-nickname {
  text-decoration: none;
  color: #5c5c5c !important;
  font-weight: 500;
}
.comment-info {
  line-height: 1.75;
  font-size: 0.75rem;
  color: #b3b3b3;
}
.reply-btn {
  cursor: pointer;
  float: right;
  color: #ef2f11;
}
.comment-content {
  font-size: 0.875rem;
  line-height: 1.75;
  padding-top: 0.625rem;
}
.comment-avatar {
  transition: all 0.5s;
}
.comment-avatar:hover {
  transform: rotate(360deg);
}
.like {
  cursor: pointer;
  font-size: 0.875rem;
}
.like:hover {
  color: #eb5055;
}
.like-active {
  cursor: pointer;
  font-size: 0.875rem;
  color: #eb5055;
}
.load-wrapper {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.load-wrapper button {
  background-color: #49b1f5;
  color: #fff;
}


</style>

<style scoped lang="scss">

.comment-input-wrapper{



}
</style>
